<template>
  <section v-if="!props.item.hidden">
    <template v-if="item.children && item.children.length">
      <el-sub-menu :index="resolvePath(props.item.path)">
        <template #title>
          <el-icon v-if="props.item.icon">
            <component
              :is="props.item.icon"
              class="el-icon"
            />
          </el-icon>
          <span v-if="props.item.title">{{ props.item.title }}</span>
        </template>
        <menu-item
          v-for="child in props.item.children"
          :key="child.path"
          :item="child"
          :is-collapse="props.isCollapse"
          :is-first-level="false"
          :base-path="resolvePath(child.path)"
          class="nest-menu"
        />
      </el-sub-menu>
    </template>
    <template v-else>
      <el-menu-item :index="props.item.path">
        <el-icon v-if="props.item.icon">
          <component
            :is="props.item.icon"
            class="el-icon"
          />
        </el-icon>
        <template #title>{{ props.item.title }}</template>
      </el-menu-item>
    </template>
  </section>
</template>

<script setup lang="ts">
import type { MenuRaw } from '@/types/sys/menu';
defineComponent({ name: 'MenuItem' });

const props = withDefaults(
  defineProps<{
    item: MenuRaw;
    isCollapse?: boolean;
    isTop?: boolean;
    isFirstLevel?: boolean;
    basePath?: string;
  }>(),
  {
    isCollapse: false,
    isTop: false,
    isFirstLevel: true,
    basePath: ''
  }
);

const resolvePath = (path: string): string => {
  return path.replace(/^\//, '');
};
</script>

<style scoped></style>
